<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="file" name="" webkitdirectory mozdirectory  id="" value="" />
	</body>
	<script>
	
	const imgs = document.querySelector('input[type=file]'); //获取file
			const vessel = document.getElementById('vessel');
			const filetype = imgs.getAttribute('datatype'); //获取自定义读取图片类型
	
			let imgsBlobArry = []; //存放blob数据
			let imgArrylist = []; //存放图片对象
	imgs.onchange = function update() {
	
				// const typeFile = imgs.accept || imgs.accept.replace(/\s/g, "").split(",");
	
		console.log(this.files);
	// 			for (let i = 0; i < imgs.files.length; i++) { //获取的图片放入数组
	
	// 				console.log(imgs.files[i].type);
	// 				if (parseInt(imgs.getAttribute("maxsize")) - 1 < i) {
	// 					console.log("超出了数量");
	// 					console.error('Exceeded number of custom files');
	// 					break;
	// 				}
	
	// 				// if (typeFile.indexOf(imgs.files[i].type) ===-1) { console.warn('上传文件类型有误'); continue; }
	
	// 				let blobs = window.URL.createObjectURL(imgs.files[i]) //获取blob二进制数据，可用来显示
					
					
	// 				// console.log(new Blob([blobs] , { type:'text/plain' }))
					
					
	// 				imgArrylist.push(imgs.files[i]);
	// 				imgsBlobArry.push({
	// 					name: imgs.files[i].name,
	// 					fileType: imgs.files[i].type,
	// 					size: conver(imgs.files[i].size),
	// 					uer: blobs,
	// 					lastModifiedDate: imgs.files[i].lastModifiedDate
	// 				});
	
	// 				let TheLabel;
	// 				if (String(imgs.files[i].type).includes('image')) {
	// 					TheLabel = new Image;
	
	// 				} else if (String(imgs.files[i].type).includes('video')) {
	// 					TheLabel = document.createElement('video');
	
	// 				} else if (String(imgs.files[i].type).includes('audio')) {
	// 					TheLabel = new Audio;
	
	// 				} else { //其他文件
	// 					TheLabel = document.createElement('div');
	// 				}
	
	// 				let imgCont = document.createElement('div'); //最外层div
	// 				let close = document.createElement('p'); //最外层div
	// 				let progress = document.createElement('div'); // 显示进度条div
	// 				close.className = 'close';
	// 				close.style = `text-align: end;line-height: 0;cursor: pointer;`;
	// 				close.innerHTML = `X`;
	
	// 				TheLabel.style = `width:100%;height:100%`;
	// 				TheLabel.src = blobs;
	// 				TheLabel.id = "examine";
	// 				imgCont.className = "imgshow imgcontshow";
	// 				imgCont.style = `width: 10%;height: 10%;float: left;`;
	// 				progress.style = `width:100%;height:0.2rem;background:#10affb`;
	
	// 				if (progress.tagName === 'DIV') {
	// 					TheLabel.innerHTML = `<img src="../img/file.jpg" alt="文件" style="width: 100%;">`
	// 				}
	
	// 				imgCont.appendChild(close);
	// 				imgCont.appendChild(TheLabel);
	
	// 				imgCont.appendChild(progress);
	// 				vessel.appendChild(imgCont);
					
	// 				console.log(imgsBlobArry)
	// 				// postJSON('http://localhost:3692/imgeblob',{city:imgsBlobArry}).then()
	// 				postJSON('http://localhost:1088/imgeblob',blobs).then()
					
	// 			}
				// window.URL.revokeObjectURL(blobs) //手动回收
				// console.log(imgsBlobArry)
	
	// 			if (imgsBlobArry.length > parseInt(imgs.getAttribute("maxsize"))) {
	// 				console.log("超出数量")
	// 				imgs.style.display = 'none';
	
	// 			} else {
	// 				imgs.style.display = "table";
	// 			}
	
	
				// function conver(limit) { //图片大小 mb 换算
				// 	let size = "";
				// 	if (limit < 0.1 * 1024) { //如果小于0.1KB转化成B
				// 		size = limit.toFixed(2) + "B";
				// 	} else if (limit < 0.1 * 1024 * 1024) { //如果小于0.1MB转化成KB
				// 		size = (limit / 1024).toFixed(2) + "KB";
				// 	} else if (limit < 0.1 * 1024 * 1024 * 1024) { //如果小于0.1GB转化成MB
				// 		size = (limit / (1024 * 1024)).toFixed(2) + "MB";
				// 	} else { //其他转化成GB
				// 		size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB";
				// 	}
				// 	let sizestr = size + "";
				// 	let len = sizestr.indexOf("\.");
				// 	let dec = sizestr.substr(len + 1, 2);
				// 	if (dec === "00") { //当小数点后为00时 去掉小数部分
				// 		return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
				// 	}
				// 	return sizestr;
				// }
			}
	
	</script>
</html>
